<template>
  <div>
    <div class="dash-border" v-for="(item, index) in questionInfo" :key="index">
      <div v-if="item.type == 1">
        <div>{{ index + 1 }}. {{ item.title }}（单选题）</div>
        <div class="option">
          <div
            class="space-item"
            v-for="(option, oindex) in item.option_data"
            :key="oindex"
          >
            <el-radio disabled :label="option.content">{{
              option.content
            }}</el-radio>
            <el-input
              :value="option.tips_content"
              v-show="option.is_tips == 2"
              style="width: 250px"
              disabled
            ></el-input>
          </div>
        </div>
      </div>
      <div v-if="item.type == 2">
        <div>{{ index + 1 }}. {{ item.title }}（多选题）</div>
        <div class="option">
          <el-checkbox-group
            v-for="(option, oindex) in item.option_data"
            :key="oindex"
          >
            <el-checkbox
              class="space-item"
              disabled
              :label="option.content"
            ></el-checkbox>
            <el-input
              :value="option.tips_content"
              v-show="option.is_tips == 2"
              style="width: 250px; margin-left: 30px"
              disabled
            ></el-input>
          </el-checkbox-group>
        </div>
      </div>
      <div v-if="item.type == 3">
        <div>{{ index + 1 }}. {{ item.title }}（问答题）</div>
        <div class="option">
          <el-input
            style="width: 400px"
            :value="item.tips_content"
            disabled
          ></el-input>
        </div>
      </div>

      <el-row>
        <el-col :span="3">
          <el-link
            type="primary"
            icon="el-icon-edit"
            :underline="false"
            @click="openQuestionEditDailog(item, index)"
            >编辑</el-link
          >
        </el-col>
        <el-col :span="4" v-if="item.id">
          <el-badge :value="item.badgeNumLogic" class="item">
            <el-link
              type="primary"
              icon="el-icon-share"
              :underline="false"
              @click="openLogicSetUpDailog(item, index)"
              >逻辑设置</el-link
            >
          </el-badge>
        </el-col>
        <el-col :span="4" v-if="item.id">
          <el-badge :value="item.badgeNumAnswer" class="item">
            <el-link
              type="primary"
              icon="el-icon-link"
              :underline="false"
              @click="openAnswerSetUpDailog(item, index)"
              >答案设置</el-link
            >
          </el-badge>
        </el-col>
        <el-col :span="3">
          <el-link
            type="primary"
            icon="el-icon-delete"
            :underline="false"
            @click="deleteQuestion(index)"
            >删除</el-link
          >
        </el-col>
        <el-col :span="3" v-show="index != 0">
          <el-link
            type="primary"
            icon="el-icon-top"
            @click="moveUp(index)"
            :underline="false"
            >上移</el-link
          >
        </el-col>
        <el-col :span="3">
          <el-link
            type="primary"
            icon="el-icon-bottom"
            v-show="index != questionInfo.length - 1"
            @click="moveDown(index)"
            :underline="false"
            >下移</el-link
          >
        </el-col>
      </el-row>
    </div>

    <!-- 逻辑设置弹窗 -->
    <LogicSetUp
      :questionIdNow="questionIdNow"
      :questionInfo="questionInfo"
      :logicObject="logicObject"
      :logicSetUpDialogVisible.sync="logicSetUpDialogVisible"
      @showLogicData="getLogicData"
    ></LogicSetUp>
    <!-- 答案设置弹窗 -->
    <AnswerSetUp
      :questionIdNow="questionIdNow"
      :questionInfo="questionInfo"
      :answerObject="answerObject"
      :answerSetUpDialogVisible.sync="answerSetUpDialogVisible"
      @showAnswerData="getAnswerData"
    ></AnswerSetUp>
    <!-- 编辑问题弹窗 -->
    <QuestionEdit
      :questionnaireId="'0'"
      :questionInfoNow="questionInfoNow"
      :questionAddDialogVisible.sync="questionEditDialogVisible"
      @showQuestionInfo="getQuestionEditInfo"
    ></QuestionEdit>
  </div>
</template>

<script>
import LogicSetUp from './LogicSetUp.vue'
import AnswerSetUp from './AnswerSetUp.vue'
import QuestionEdit from './QuestionAdd.vue'
export default {
  components: { LogicSetUp, AnswerSetUp, QuestionEdit },
  props: {
    questionConfig: {
      type: Array,
      default: function () {
        return {}
      }
    },
    questionnaireId: {
      type: String,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      questionInfo: [],
      questionIdNow: 0,
      questionInfoNow: {},
      activeIndex: '',

      // 控制逻辑设置弹窗的显示与否
      logicSetUpDialogVisible: false,
      logicSetUpInfo: {},
      logicObject: {},

      // 控制答案设置弹窗的显示与否
      answerSetUpDialogVisible: false,
      answerSetUpInfo: {},
      answerObject: {},

      // 控制编辑问题弹窗的显示与否
      questionEditDialogVisible: false
    }
  },
  created() {
    this.questionInfo = JSON.parse(JSON.stringify(this.questionConfig))
    console.log(this.questionnaireId)
  },
  methods: {
    moveDown(index) {
      let downData = this.questionInfo[index + 1]
      this.questionInfo.splice(index + 1, 1)
      this.questionInfo.splice(index, 0, downData)
    },
    moveUp(index) {
      let upData = this.questionInfo[index - 1]
      this.questionInfo.splice(index - 1, 1)
      this.questionInfo.splice(index, 0, upData)
    },
    async deleteQuestion(index) {
      const confirmResult = await this.$confirm(
        '是否确认删除该问题？删除后不可恢复',
        '删除问题',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消操作')
      }
      this.questionInfo.splice(index, 1)
    },
    async getQuestionInfo() {
      const { data: res } = await this.$http.post(
        '/admin/question_manage/questionList',
        { id: this.questionnaireId }
      )
      if (res.meta.status == 200) {
        this.questionInfo = JSON.parse(JSON.stringify(res.data))
        console.log('getQuestionInfo')
      }
    },
    openLogicSetUpDailog(item, index) {
      console.log(item)
      this.logicSetUpDialogVisible = true
      this.questionIdNow = Number.parseInt(item.id)
      this.activeIndex = index
      this.logicObject = Array.isArray(item.logic_data) ? {} : item.logic_data
      // console.log(Array.isArray(item.logic_data), item.logicObject)
    },
    openAnswerSetUpDailog(item, index) {
      console.log(item)
      this.answerSetUpDialogVisible = true
      this.questionIdNow = Number.parseInt(item.id)
      this.activeIndex = index
      this.answerObject = Array.isArray(item.answer_data)
        ? {}
        : item.answer_data
    },
    openQuestionEditDailog(item, index) {
      console.log(item)
      this.questionEditDialogVisible = true
      this.questionInfoNow = JSON.parse(JSON.stringify(item))
      this.activeIndex = index
    },
    getLogicData(data) {
      this.questionInfo[this.activeIndex].logic_data = JSON.parse(
        JSON.stringify(data)
      )
      this.questionInfo[this.activeIndex].badgeNumLogic =
        this.questionInfo[this.activeIndex].logic_data.logic_data.length
      console.log(this.questionInfo[this.activeIndex])
    },
    getData() {
      this.$emit('showQuestionAllData', this.questionInfo)
    },
    getAnswerData(data) {
      console.log(data)
      this.questionInfo[this.activeIndex].answer_data = JSON.parse(
        JSON.stringify(data)
      )
      console.log(this.questionInfo[this.activeIndex].answer_data)
      this.questionInfo[this.activeIndex].badgeNumAnswer =
        this.questionInfo[this.activeIndex].answer_data.answer_data.length
    },
    getQuestionEditInfo(data) {
      console.log(data)
      for (const j in data) {
        this.questionInfo[this.activeIndex][j] = data[j]
      }
    }
  },
  watch: {
    //当子组件监听到props里的属性发生变化，则进行数据拷贝
    questionConfig: {
      handler(val, oldval) {
        this.questionInfo = JSON.parse(JSON.stringify(val))
        for (let i = 0; i < this.questionInfo.length; i++) {
          if (this.questionInfo[i].logic_data.logic_data != undefined) {
            this.questionInfo[i].badgeNumLogic =
              this.questionInfo[i].logic_data.logic_data.length
          }
          if (this.questionInfo[i].answer_data.answer_data != undefined) {
            this.questionInfo[i].badgeNumAnswer =
              this.questionInfo[i].answer_data.answer_data.length
          }
        }
        console.log('watch')
      },
      //别忘记开启深度监听
      deep: true
    },
    questionnaireId() {
      console.log(this.questionnaireId)
      if (this.questionnaireId) {
        this.getQuestionInfo()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.dash-border {
  border: 1px dashed #dbdbdb;
  padding: 15px;
  margin-bottom: 10px;
}
.option {
  margin: 10px 0 10px 20px;
}
.space-item {
  line-height: 30px;
}
.el-row {
  margin-top: 20px;
}
</style>